<template>
    <rx-dialog style="height: 100%;" @handOk="ok" @cancel="cancel">
        <div>
            <rx-grid ref="table"
                     :dataSource="relLists"
                     :allowRowSelect="false"
                     :multiSelect="false"
                     :showPage="false"
                     :columns="headerColumns"
                     :heightauto="true"
            >
                <span slot="listName" slot-scope="{text,record,index,blur}">{{ text }}</span>
                <span slot="permission" slot-scope="{text,record,index,blur}" @ok="blur(index,'read',$event,record)">
                    <a-checkbox :checked="filterPermissionEdit(record.permission.value)" @click.stop="compile(record)"></a-checkbox>
                    <my-icon v-if="!filterPermissionEdit(record.permission.value)" @click="editRecord(record,index)" style="margin-left: 5px" type="iconsetup"></my-icon>
                    <a-tag v-if="record.permission.value !='none' && record.permission.value !='everyone'" style="margin-left: 10px" color="green">{{i18n('list.alreadySet','已设置')}}</a-tag>
                </span>
            </rx-grid>
        </div>
    </rx-dialog>
</template>

<script>

import {BaseForm, RxLayout, RxGrid, Dialog,Util} from "@lowcode/jpaas-common-lib";
import DialogBox from "@/assets/js/DialogBox";

export default {
    name: "FormRelListPermission",
    props: {
        relListArray: {
            type: Array,
            default: []
        },
        layerid: String,
        lydata: Object,
        destroy: Function,
    },
    mixins: [BaseForm],
    components: {
        RxLayout,
        RxGrid,
        Dialog
    },
    data() {
        return {
            relLists:[],
            headerColumns: [
                {
                    title: this.i18n('form.list','列表'),
                    dataIndex: 'listName',
                    allowCellEdit: true,
                    scopedSlots: {customRender: 'listName'}
                },
                {
                    title: this.i18n('form.permission','权限'),
                    dataIndex: 'permission',
                    allowCellEdit: false,
                    scopedSlots: {customRender: 'permission'}
                }
            ]
        }
    },
    created() {
        this.relLists=this.relListArray;
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formPermiss",key);
        },
        filterPermissionEdit(value){
            if(value=='everyone'){
                return true
            }else {
                return false
            }
        },
        compile(record){
            if(record.permission.value =='everyone'){
                record.permission.value='none';
                record.permission.label=this.i18n('list.none','无权限')
            }else {
                record.permission.value='everyone';
                record.permission.label=this.i18n('list.everyone','所有人')
            }
        },
        ok() {
            Util.closeWindow(this,"ok",this.relLists);
        },
        cancel() {
            Util.closeWindow(this,"cancel");
        },
        editRecord(record, index) {
            var self_ = this;
            DialogBox.openPermissionUser(this, record.permission.value, function (self_, data) {
                var list = self_.$refs.table.getData();
                var row = list[index];
                self_.setChangeValues(data,row);
            });
        },
        setChangeValues(data, row) {
            var rowData = {permission:data};
            this.$refs.table.updateRow(row, rowData);
            this.relLists=this.$refs.table.dataAction;
        },
    },
    watch: {
        "relListArray":function (val,oldVal){
            this.relLists=this.relListArray;
        }
    }
}
</script>

<style scoped>

</style>